<!--
 * @Description:弹出垂直滚动条
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-20 17:05:25
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>弹出垂直滚动条</title>
	<style>
		* {
			margin: 0;
			padding: 0
		}

		.box {
			height: 500px;
			width: 300px;
			border: 1px solid red;
			margin: 100px;
			overflow: hidden;
			position: relative;
		}

		.content {
			width: calc(100% - 18px);
			background-color: pink;
			height: auto;
			padding: 8px 0;
			position: absolute;
			top: 0;
			left: 0;
		}

		.scroll {
			width: 20px;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			background-color: #eee;
		}

		.bar {
			width: 100%;
			background-color: rebeccapurple;
			cursor: pointer;
			border-radius: 5px;
			position: absolute;
			top: 0;
			left: 0;
			word-wrap: break-word;

		}
	</style>
	<script>
		window.onload = function () {
			let box = document.getElementById("box") //大盒子哦
			let content = box.children[0] //内容盒子
			let scroll = box.children[1] //右边盒子
			let bar = scroll.children[0]
			//1滚动条 内容越多，滚动条越短  反之 越长
			//滚动条高度 滚动一次计算公式 容器的高度/内容的高度*容器的高度
			//内容盒子滚动公式  比例倍数
			//(内容盒子高度-大盒子高度)/(滚动条高度-红色盒子的高度)*红色盒子移动的数值
			
			var barHeight = box.offsetHeight / content.offsetHeight * box.offsetHeight;
			console.log("滚动条高度",barHeight)
			bar.style.height = barHeight + "px"
			bar.innerHTML = parseInt(barHeight) + "px"
			//下面开始拖动 1红色的盒子 2内容盒子
			startScroll(bar, content)

			function startScroll(obj, target) {
				obj.onmousedown = function () {
					var event = event || window.event
					var t = event.clientY - this.offsetTop; //拖动块距离顶部距离
					var that = this
					document.onmousemove = function (event) { //拖动
						var event = event || window.event
						var barTop = event.clientY - t
						var contentTop = //内容盒子要移动 (内容盒子高度-大盒子高度)/(滚动条高度-红色盒子的高度)*红色盒子移动
							(target.offsetHeight - box.offsetHeight) /
							(box.offsetHeight - that.offsetHeight) * barTop
						if (barTop < 0) {
							barTop = 0;
						} else if (barTop > box.offsetHeight - that.offsetHeight) {
							barTop = box.offsetHeight - that.offsetHeight
						} else {
							target.style.top = -contentTop + "px" //内容区域滚动
						}
						that.style.top = barTop + "px" //滚动条滚动
						window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty
					}
				}
				document.onmouseup = function (event) { //弹起
					document.onmousemove = null
				}
			}

		}
	</script>
</head>

<body>
	<div class="box" id="box">
		<div class="content">
			语言用来写后台的三巨头：PHP、JAVA、ASP.NET<br>
			我个人强烈推荐PHP，如果你现在已经能熟练地运用各种前端构建工具（有人觉得前端构建工具关现代JS什么事儿？一个熟练运用webpack/Gulp的人，会不熟悉现代JS? 反之亦然），对现代JS的理解够深入，对ES6有深入的理解，
			那么花时间看看Node也没错， 但是依照我的经验，这样的人早已会了不止一门后端语言。猜想你应该是个跟我一样的菜鸟。<br>
			学习后端语言， 不就是为了了解整站开发的流程， 原理嘛。Node本身抽象级别不高， 有很多底层的代码需要你自己去写， 如果你JS不过关，学起来就很困难，
			当然你也可以用现成的库，比如Express等，但那样抽象又太高，你体会不到其中的真意（除非你花大量的时间来看相关文档）。<br>
			这个时候，php就出现了，他本身就为了网站开而生， 语言简单，易上手。对新手非常友好。而且使用范围还很广。 至于大家说的python，你要真的用原生python写后台， 实际是件很费神的事儿，你要是用flask之类的写吧。
			那就完蛋了， 你是为了学后台语言去的。。。 、<br>
			有本书叫《Head First Php and MySQL》, 看完你就知道了。<br>
			三门语言各有特色，php轻量级开发，适合开发论坛和bbs的后台。java就不用说了，比较大型的项目的后台都是用java写的。工作的需求也是很大，但是从业的人员也是
			非常多的，ASP.NET是微软提出的开发后台的一门技术。但是因为跨平台的特性不好的原因。是干不过Java的不过听说最近微软最近在搞跨平台性。
			你是前端工程师的话，可以考虑学习node.js，它给前端转全栈算是一条路吧<br>
			JAVA的话学习要花费很大的精力和心血。毕竟大牛比较多，但是现在主要需求还是Java吧。<br>
			Python也是不错的，相信未来是一匹黑马。程序猿就是这样，要不断扩充自己的技术栈嘛！<br>
			身为前端，跟你提个小建议，目前前端的技术范围很广，学深了发展会很好，目标一定要坚定 <br>
			至于后端目前先了解一下就行 一般 nodeJs java php 有一天你会发现多不如精<br>
			加油！骚年
		</div>
		<div class="scroll">
			<div class="bar"></div>
		</div>
	</div>
</body>

</html>